// 基本信息
import BaseMap from "@/components/Map/antvl7/BaseMap";
import SelectDeptList from "@/components/Sansan/SelectDeptList";
import SelectGagewayList from "@/components/Sansan/SelectGagewayList";
import SelectProductList from "@/components/Sansan/SelectProductList";
import { MarkerDataInfo } from "@/utils/gps";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
import DialogBox from "../../../../../components/DialogBox";
import { generateSn } from "../../../../../utils/util";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			sn: [{ required: true, message: "请输入设备SN", trigger: "change" }]
		});

		const validData = () => {
			formRef.value?.validate(valid => {
				if (valid) {
					if (!props.detail.name) {
						props.detail.name = props.detail.sn;
					}
					emit("submit");
				}
			});
		};
		return () => {
			return (
				<DialogBox {...attrs} width={"980px"} title={props.title} onConfirm={() => validData()}>
					<div class="flex" style="height:500px">
						<div style="width:400px" class="pr-6">
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100">
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.sn")} prop="sn">
									<el-input v-model={props.detail.sn} disabled={props.detail.id ? true : false}>
										{{
											append: () => {
												return props.detail.id ? null : (
													<el-button type="primary" link onClick={() => (props.detail.sn = generateSn())}>
														<span class="text-sm p-1 pr-1">{proxy?.$t("device_basicdialog.btn.automatically")}</span>
													</el-button>
												);
											}
										}}
									</el-input>
								</el-form-item>
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.name")} prop="name">
									<el-input v-model={props.detail.name} />
								</el-form-item>
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.gatewaySn")} prop="gatewaySn">
									<SelectGagewayList detail={props.detail} />
								</el-form-item>
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.deptId")} prop="deptId">
									<SelectDeptList detail={props.detail} initDefault={!props.detail.deptId} />
								</el-form-item>
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.productModel")} prop="productModel">
									<SelectProductList detail={props.detail} v-model={props.detail.productModel} />
								</el-form-item>
								<el-form-item label={proxy?.$t("device_basicdialog.form_label.address")} prop="address">
									<div class="leading-6">{props.detail.location?.address || proxy?.$t("device_basicdialog.address.default")}</div>
								</el-form-item>
							</el-form>
						</div>
						<div class="flex-1 border ml-2">
							{attrs.visible ? (
								<BaseMap
									editerMarker
									detail={props.detail as MarkerDataInfo}
									onLocation={location => (props.detail.location = location)}
								/>
							) : null}
						</div>
					</div>
				</DialogBox>
			);
		};
	}
});
